<template>
    <div class="jd flex-cc fdc">
        {{ acc }}
        <input type="range" v-model="acc" />
    </div>
</template>

<script setup>
import { ref } from "vue";

const acc = ref(100)
</script>

<style scoped>
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.jd {
    --r: 180px;
    --a: v-bind('acc + "%"');
    width: var(--r);
    height: var(--r);
    /* background-color: #00000030; */
    border: 4px solid var(--el-border-color);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    font-size: 40px;

    &::after {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        left: -50%;
        top: calc((100% - var(--a)) * 1.1);
        transform: rotate(45deg);
        background-color: aquamarine;
        border-radius: 40%;
        animation: rotate 4.5s infinite linear;
        z-index: -1;
    }
}
</style>